Ext.onReady(function() {

       Ext.QuickTips.init();// 浮动信息提示

       Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId]

       Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地

       var simpleForm = new Ext.FormPanel({
              renderTo : document.body,
              labelAlign : 'left',
              title : '表单例子',
              buttonAlign : 'right',
              bodyStyle : 'padding:5px',
              width : 600,
              frame : true,
              labelWidth : 80,
              items : [{

                                   xtype : 'tabpanel',// 注意将xtype类型设置为'tabpanel'
                                   plain : true,// 将标签页头的背景设置为透明的
                                   activeTab : 0,// 当前活动的标签页是第一
                                   height : 235,// 高度设置为235px
                                   defaults : {
                                          bodyStyle : 'padding:10px'
                                   },// tab页的面板使用内补丁10px
                                   items : [{
                                          title : '登录信息',// 标签标题是登录信息
                                          layout : 'form',// 控件容器是formlayout
                                          defaults : {
                                                 width : 230
                                          },// 控件的默认宽度是230px
                                          defaultType : 'textfield',// 默认控件类型是textfield
                                          items : [{
												   fieldLabel : '登录名',
												   name : 'loginID',
												   allowBlank : false,
												   vtype : 'alphanum',
												   allowBlank : false
												},{
													   inputType : 'password',// 密码输入框需要定义input控件的类型为password
													   fieldLabel : '密码',
													   name : 'password',
													   allowBlank : false
												}]

                                   		},{

                                                        title : '数字时间字母',
                                                        layout : 'form',
                                                        defaults : {
                                                               width : 230
                                                        },
                                                        defaultType : 'textfield',
                                                        items : [{
																		 xtype : 'numberfield',// 只能输入数字的输入控件
																		 fieldLabel : '数字',
																		 name : 'number'
																  }, {
																		 xtype : 'timefield',// 时间输入控件
																		 fieldLabel : '时间',
																		 name : 'time'
																  }, {
																		 fieldLabel : '纯字母',
																		 name : 'char',
																		 vtype : 'alpha'
																  }]

                                                 }, {

                                                        title : '文本区域',

                                                        layout : 'fit',// 为了让textarea自适应面板容器，使用了fitlayout作为它的布局

                                                        items : {

                                                               xtype : 'textarea',// 设置类型为textarea

                                                               id : 'area',

                                                               fieldLabel : ''

                                                        }

                                                 }]

                            }],

              // 为form添加按钮了，在formpanel的buttons属性中我们加入了一个保存按钮和取消按钮

              buttons : [{

                                   // 在buttons里定义的按钮默认是Ext.Button，所以按钮的属性定义可以查看Ext.Button的API。在这里两个按钮都没用到其它属性，只是设置了显示文本（text）和单击事件。

                                   text : '保存',

                                   handler : function() {

                                          // 在formpanel类中，form属性指向的是formpanle里的basicform对象，我们可通过formpanle.form来使用该basicform对象。在被例子，我们已经将formpanel对象赋值给了simpleForm这个变量，所以我们可以通过simpleForm.form访问面板里的basicform对象。

                                          if (simpleForm.form.isValid()) {

                                                 // 保存按钮要做的就是先做basicform的客户端验证，验证通过了则设置该按钮状态为disable，防止2次提交。然后调用simpleForm.form.doAction方法提交数据

                                                 this.disabled = true;

                                                 // doAction方法的第一个参数“submit”的意思是表示执行的是提交操作，提交的后台页面是test.jsp（url:'test.asp'），提交方式是post（method:'post'），没有其它提交参数（params:''）

                                                 simpleForm.form.doAction('submit', {

                                                                      url : 'resForm.jsp',

                                                                      method : 'post',

                                                                      params : '',

                                                                      // 提交成功后执行success定义的函数，后台返回的数据格式是需要我们注意的，一定要json格式，而且必须包含“success:true”，不然不会执行success定义的函数。

                                                                      // success定义的函数返回两个参数，第一是form本身，第二个是ajax返回的响应结果，在action.result这个json数组了保存了后台返回的数据。

                                                                      success : function(form, action) {

                                                                             // 例如返回的json结构是"{success:true,data:'成功保存！'}"，

                                                                             Ext.Msg.alert('操作',

                                                                                           action.result.data);

                                                                             this.disabled = false;

                                                                      },

                                                                      // 定义failure函数，就是网络通讯存在问题的时候将显示错误信息。

                                                                      failure : function() {

                                                                             Ext.Msg.alert('操作', '保存失败！');

                                                                             this.disabled = false;

                                                                      }

                                                               });

                                          }

                                          // 如果想form按以前的老办法提交，可以在formpanel的定义中加入一下设置：

                                          // onSubmit: Ext.emptyFn,

                                          // submit: function() {

                                          // this.getEl().dom.submit();}

                                          // 第一个设置的目的是取消formpanel的默认提交函数。第二就是设置新的提交方式为旧方式提交。

 

                                   }

                            }, {

                                   // 取消按钮就是简单的reset一下form的控件

                                   text : '取消',

                                   handler : function() {

                                          simpleForm.form.reset();

                                   }

                            }]

       });

 

});